<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <th:block th:replace="admin/common :: heads"></th:block>
    <style type="text/css">
        h1.p {
            position: relative;
            top: 50%;
            margin: 0 auto;
        }
    </style>

</head>
<body class="sidebar-fixed header-fixed">
<div class="page-wrapper">
    <th:block th:replace="admin/common :: navbar"></th:block>

    <div class="main-container">
        <th:block th:replace="admin/common :: sidebar"></th:block>

        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header bg-light">
                            <div class="row">
                                <div class="col-10">Librarian Management</div>
                                <div class="col-2">
                                    <button class="btn btn-primary" data-toggle="modal" data-target="#modal-4"
                                            data-_extension-text-contrast="" style="float: left;">Register New Account
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="mb-4">
                                <section class="forms">
                                    <div class="container-fluid">
                                        <div class="row">
                                            <div class="col-lg-12" style="display: flex; flex-direction:column">
                                                <div class="card">
                                                    <div class="card-close">
                                                    </div>
                                                    <div class="card-header d-flex align-items-center">
                                                        <h3 class="h4">Search librarians</h3>
                                                    </div>
                                                    <div style="align-self: center" class="card-body col-sm-8">
                                                        <div class="form-inline">
                                                            <div class="form-group col-sm-10">
                                                                <input type="text" placeholder="Jane Doe"
                                                                       id="inlineFormInput" class="form-control col-12"
                                                                       style="" data-_extension-text-contrast="bg">
                                                            </div>
                                                            <div class="form-group col-sm-1 ">
                                                                <button id="search-btn" class="btn btn-primary">Search</button>
                                                            </div>


                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>


                                <div class="modal fade" id="modal-4" tabindex="-1" role="dialog"
                                     aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header bg-primary border-0">
                                                <h5 class="modal-title text-white">Register Account</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close" data-_extension-text-contrast="">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                            </div>

                                            <div class="modal-body p-5">
                                                <div class="card-body">
                                                    <div class="form-horizontal">
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Name</label>
                                                            <div class="col-sm-9">
                                                                <input id="name" type="text" class="form-control"
                                                                       data-_extension-text-contrast="bg">
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Email</label>
                                                            <div class="col-sm-9">
                                                                <input id="email" type="email" class="form-control"
                                                                       data-_extension-text-contrast="bg">
                                                                <!-- small class="help-block-none">A block of help text that breaks onto a new line and may extend beyond one line.</small -->
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Phone
                                                                Number</label>
                                                            <div class="col-sm-9">
                                                                <input id="phoneNumber" type="text" class="form-control"
                                                                       data-_extension-text-contrast="bg">
                                                                <!-- small class="help-block-none"></small -->
                                                            </div>
                                                        </div>
                                                        <hr>
                                                        <div class="line"></div>
                                                        <div class="form-group row">
                                                            <label class="col-sm-3 form-control-label">Password</label>
                                                            <div class="col-sm-9">
                                                                <input id="password" type="password" name="password"
                                                                       class="form-control"
                                                                       data-_extension-text-contrast="bg">
                                                            </div>
                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                            <div class="modal-footer border-0">
                                                <button class="btn btn-secondary" data-dismiss="modal"
                                                        aria-label="Close" data-_extension-text-contrast="">Cancel
                                                </button>
                                                <button id="submit" class="btn btn-primary"
                                                        data-_extension-text-contrast="">Register
                                                </button>

                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <hr>
                                <div class="my-4">
                                    <section class="client no-padding-top">
                                        <div class="container-fluid">
                                            <div class="row">
                                                <!-- Client Profile -->
                                                <div class="col-lg-12">
                                                    <div class="card">

                                                        <div class="card-header d-flex align-items-center">
                                                            <h3 class="h4">Search results</h3>
                                                        </div>
                                                        <div class="container-fluid">
                                                            <div class="row" id="librarian-result">

                                                                <div style="color: #808080;" class="col-sm-12 text-center">
                                                                    <h1>The search result is empty</h1>
                                                                    <p>Please enter any keyword</p>
                                                                </div>


                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <th:block th:replace="admin/common :: scripts"></th:block>


        <script id="librarian-result-template" type="text/x-handlebars-template">
            <div class="col-md-4" id="librarian-{{userId}}">
                <div class="card">
                    <div class="card-header bg-light">
                        <strong>{{name}}</strong>
                        <div class="card-actions">
                            <a href="#" class="btn" onclick="deleteLibrarian({{userId}})">
                                <i class="fa fa-times">Delete</i>
                            </a>
                            <a href="#" class="btn" data-target="#edit-librarian-{{userId}}" data-toggle="modal">
                                <i class="fa fa-cog">Edit</i>
                            </a></div>
                    </div>
                    <div class="card-body">
                        Email： {{email}}
                        <br>
                        <hr>
                        phone number： {{phoneNumber}}
                        <br>
                        <hr>
                        Sign up time： {{signUpTime}}
                        <br>
                    </div>
                </div>
            </div>

                <!-- Modal-->
                <div id="edit-librarian-{{userId}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                     aria-hidden="true" class="modal fade text-left">
                    <div role="document" class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 id="exampleModalLabel" class="modal-title">Edit Modal</h4>
                                <button type="button" data-dismiss="modal" aria-label="Close" class="close"><span
                                        aria-hidden="true">×</span></button>
                            </div>
                            <div class="modal-body">
                                <div>
                                    <div class="form-group">
                                        <label>Name</label>
                                        <input id="edit-librarian-name-{{userId}}" type="text" value="{{name}}"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Email</label>
                                        <input id="edit-librarian-email-{{userId}}" type="email" value="{{email}}"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Phone Number</label>
                                        <input id="edit-librarian-phoneNumber-{{userId}}" type="text"
                                               value="{{phoneNumber}}"
                                               class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>Password</label>
                                        <input id="edit-librarian-password--{{userId}}" type="password" value="Password"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
                                <button type="button" data-dismiss="modal" onclick="editLibrarian({{userId}})"
                                        class="btn btn-primary">Save changes
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </script>


        <script id="searching-words" type="text/x-handlebars-template">
            <div style="color: #808080;" class="col-sm-12 text-center">
                <h1>Now searching ...</h1>
                <p>Please wait a moment</p>
            </div>
        </script>


        <script id="empty-words" type="text/x-handlebars-template">
            <div style="color: #808080;" class="col-sm-12 text-center">
                <h1>The search result is empty</h1>
                <p>Please enter another keyword</p>
            </div>
        </script>


        <script id="error-words" type="text/x-handlebars-template">
            <div style="color: #808080;" class="col-sm-12 text-center">
                <h1>Something error</h1>
                <p>{{message}}</p>
            </div>
        </script>


        <script>
            let source = document.getElementById("librarian-result-template").innerHTML;
            let template = Handlebars.compile(source);

            let searchingWords = Handlebars.compile($("#searching-words").html());
            let emptyWords = Handlebars.compile($("#empty-words").html());
            let errorWords = Handlebars.compile($("#error-words").html());

            $("#search-btn").bind("click", function () {
                let formData = new FormData();
                if ($("#inlineFormInput").val() == "") {
                    alert("con not be empty");
                    return;
                }

                formData.append("name", $("#inlineFormInput").val());

                for (elem of $("#librarian-result").children()) elem.remove();
                $("#librarian-result").append(searchingWords(""));

                $.ajax({
                    url: "/api/search/librarian/",
                    type: "POST",
                    dataType: "json",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        for (elem of $("#librarian-result").children()) elem.remove();

                        if (resp.data.length == 0)
                            $("#librarian-result").append(emptyWords(""));
                        else for (elem of resp.data) {
                            elem.avatar = get_identicon(elem.name);
                            elem.signUpTime = moment(elem.signUpTime, "YYYY-MM-DD hh:mm:ss").format('YYYY-MM-DD');
                            $("#librarian-result").append(template(elem));
                        }
                    },
                    error: function (resp) {
                        for (elem of $("#librarian-result").children()) elem.remove();

                        $("#librarian-result").append(errorWords(resp));
                    }
                });
            })

            function get_identicon(text) {
                let size = 100;
                let outputType = "HEX";
                let hashtype = "SHA-1";

                let shaObj = new jsSHA(text, "TEXT");
                let hash = shaObj.getHash(hashtype, outputType, 1);
                let data = new Identicon(hash, size).toString();
                return 'data:image/png;base64,' + data;
            }
        </script>

        <script>
            function deleteLibrarian(userId) {
                $.ajax({
                    url: "/api/librarian/" + userId,
                    type: "DELETE",
                    success: function (resp) {
                        $("#librarian-" + userId).remove();
                        $("#edit-librarian-" + userId).remove();
                        if ($("#librarian-result").children().length == 0) {
                            let emptyWords = Handlebars.compile($("#empty-words").html());
                            $("#librarian-result").html(emptyWords(""));
                        }
                    },
                    error: function (resp) {
                        alert(resp.message);
                    }
                });
            }

            function editLibrarian(userId) {
                let formData = new FormData();
                formData.append("name", $("#edit-librarian-name-" + userId).val());
                formData.append("phoneNumber", $("#edit-librarian-phoneNumber-" + userId).val());
                formData.append("email", $("#edit-librarian-email-" + userId).val());
                formData.append("password", $("#edit-librarian-password-" + userId).val());

                $.ajax({
                    url: "/api/librarian/" + userId,
                    type: "PUT",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        alert("success");
                    },
                    error: function (resp) {
                        alert(resp.responseJSON.message);
                    }
                });
            }
        </script>

        <script>
            $("#logout").bind("click", function () {
                $.ajax({
                    url: "/api/user/token",
                    type: "DELETE",
                    success: function (resp) {
                        console.log(resp);
                    }
                });
                window.location.href = "login.html";
            });
        </script>


        <script>
            $("#submit").bind("click", function () {
                let formData = new FormData();
                formData.append("name", $("#name").val());
                formData.append("phoneNumber", $("#phoneNumber").val());
                formData.append("email", $("#email").val());
                formData.append("password", $("#password").val());

                $.ajax({
                    url: "/api/librarian/",
                    type: "POST",
                    dataType: "json",
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        alert("success");
                        $("#name").val("");
                        $("#phoneNumber").val("");
                        $("#email").val("");
                        $("#password").val("");
                        window.location.href=window.location.href;
                    },
                    error: function (resp) {
                        alert(resp.responseJSON.message);
                    }
                });
            })
        </script>
</body>
</html>
